<template>
	<view>
		<view class="scroll" v-for="item in initOptions" :key="item.prop">
			<text v-if="item.clearShow && item.value" @click="clearInput(item.prop)"
				class=" clear-icon cuIcon-roundclose"></text>
			<!-- 文本 -->
			<template v-if="item.type === 'text'">
				<view class="cu-form-group">
					<view class="title"> <text v-if="item.required" class="text-red margin-right-xs">*</text>
						{{item.title}}
					</view>
					<input @input="onChange($event,item.prop)" :value="item.value" class="text-right"
						:disabled="item.disabled" :placeholder="item.placeholder || '请输入'" name="input"></input>
				</view>
			</template>
			<!-- 数字 -->
			<template v-if="item.type === 'number'">
				<view class="cu-form-group">
					<view class="title"> <text v-if="item.required" class="text-red margin-right-xs">*</text>
						{{item.title}}
					</view>
					<input type="number" @input="onChange($event,item.prop)" :value="item.value" class="text-right"
						:disabled="item.disabled" :placeholder="item.placeholder || '请输入'" name="input"></input>
				</view>
			</template>
			<!-- check -->
			<template v-if="item.type === 'checkbox'">
				<checkbox-group class="block" @change="CheckboxChange($event,item.prop)">
					<view class="cu-form-group">
						<view class="title"> <text v-if="item.required" class="text-red margin-right-xs">*</text>
							{{item.title}}
						</view>
						<checkbox class='round blue' :class="item.checked ? 'checked':''" :checked="item.checked"
							:disabled="item.disabled" value="A"></checkbox>
					</view>
				</checkbox-group>
			</template>
			<!-- switch -->
			<template v-if="item.type === 'switch'">
				<view class="cu-form-group">
					<view class="title"> <text v-if="item.required" class="text-red margin-right-xs">*</text>
						{{item.title}}
					</view>
					<switch @change="switchChange($event,item.prop)" :class="item.value ? 'checked':''"
						:disabled="item.disabled" :checked="item.value"></switch>
				</view>
			</template>
			<!-- navigator -->
			<template v-if="item.type === 'navigator'">
				<navigator :url="item.url" class="cu-form-group solid-bottom" hover-class="none">
					<view class="title"> <text v-if="item.required" class="text-red margin-right-xs">*</text>
						{{item.title}}
					</view>
					<view class="content text-right text-lg"> <text
							class="text-df">{{item.desc || item.placeholder}}</text> <text
							class="cuIcon-right text-grey"></text></view>
				</navigator>
			</template>
			<!-- select -->
			<template v-if="item.type === 'select' && !item.remote">
				<view class="cu-form-group">
					<view class="title"> <text v-if="item.required" class="text-red margin-right-xs">*</text>
						{{item.title}}
					</view>
					<picker @change="PickerChange($event,item.prop)" :value="item.selectDefaultindex"
						:range="item.dicData" range-key="label">
						<view class="picker">
							{{item.desc || item.placeholder}}
						</view>
					</picker>
				</view>
			</template>
			<!-- select远程 -->
			<template v-if="item.type === 'select' && item.remote">
				<Remote :value="item" @change="PickerChangeRemote($event,item.prop,item.relationProp)" />
			</template>
			<!-- 日期 -->
			<template v-if="item.type === 'date'">
				<view class="cu-form-group1">
					<view class="title flex-sub">{{item.title}}</view>
					<view class="flex-sub">
						<!-- <uni-datetime-picker v-model="item.value" :border="false" type="date"
							:clear-icon="false" :placeholder="item.placeholder" /> -->
						<picker mode="date" :value="item.value" @change="changeDate($event,item.prop,item.relationProp)"
							:start="item.start" :end="item.end" :placeholder="item.placeholder">
							<text
								style="color: #757171; margin-right: 20rpx;">{{item.value?item.value: item.placeholder?item.placeholder:'请选择' }}</text>
						</picker>
					</view>
				</view>
			</template>
			<!-- 日期时间 -->
			<template v-if="item.type === 'datetime'">
				<view class="cu-form-group1">
					<view class="title"> <text v-if="item.required" class="text-red margin-right-xs">*</text>
						{{item.title}}
					</view>
					<view class="flex-sub">
						<uni-datetime-picker v-model="item.value" :border="false" type="datetime" :clear-icon="false"
							:placeholder="item.placeholder" @change="changeDate" />


					</view>
				</view>
			</template>
			<!-- 日期范围 -->
			<template v-if="item.type === 'daterange'">
				<view class="title text-left bg-white padding solid-bottom"><text v-if="item.required"
						class="text-red margin-right-xs">*</text>{{item.title}}</view>
				<view class="flex-sub"><uni-datetime-picker v-model="item.value" :border="false" type="daterange"
						rangeSeparator="至" /></view>
			</template>
			<!-- 日期时间范围 -->
			<template v-if="item.type === 'datetimerange'">
				<view class="title text-left bg-white padding solid-bottom"><text v-if="item.required"
						class="text-red margin-right-xs">*</text>{{item.title}}</view>
				<view class="flex-sub"><uni-datetime-picker v-model="item.value" :border="false" type="datetimerange"
						rangeSeparator="至" /></view>
			</template>
			<!-- 日期时间范围 -->
			<template v-if="item.type === 'area'">
				<view class="cu-form-group" @click="openPicker(item.prop)">
					<view class="title"> <text v-if="item.required" class="text-red margin-right-xs">*</text>
						{{item.title}}
					</view>
					{{item.value || item.placeholder}}
				</view>
			</template>
		</view>
		<view style="display: flex; align-items: center; justify-content: space-between;">
			<view v-if="showClearBtn" class="padding flex flex-direction clear" @click="clear">
				<button class="cu-btn bg-blue lg">{{clearBtnText||'清空'}}</button>
			</view>
			<view class="padding flex flex-direction" @click="submit" :class="showClearBtn?'clear':'flex1'">
				<button class="cu-btn bg-blue lg">{{confirmText}}</button>
			</view>
			<view v-if="showExportBtn" class="padding flex flex-direction" @click="handExport"
				:class="showExportBtn?'clear':'flex1'">
				<button class="cu-btn bg-blue lg">导出</button>
			</view>
		</view>
		<lotus-address @choseVal="choseValue($event)" :lotusAddressData="lotusAddressData"></lotus-address>
	</view>
</template>
<script>
	import util from "utils/util";
	import Remote from './remote.vue'
	import lotusAddress from "@/components/Winglau14-lotusAddress/Winglau14-lotusAddress.vue";
	export default {
		components: {
			Remote,
			lotusAddress
		},
		data() {
			return {
				initOptions: [],
				range: [],
				lotusAddressData: {
					visible: false,
					provinceName: "",
					cityName: "",
					townName: "",
				},
				selectAddressShow: false,
				prop: ""
			};
		},
		// model: {
		//   prop: "value",
		//   event: "change",
		// },
		props: {
			confirmText: {
				type: String,
				default: '确认'
			},
			clearBtnText: {
				type: String,
				default: '清空'
			},
			options: {
				// 配置项
				type: Array,
				required: true,
			},
			value: {
				type: Object,
				required: true,
				default: () => {
					return {}
				},
			},
			defaultValue: {
				type: Object,
				default: () => {
					return {}
				},
			},
			formatParams: {
				//是否参数格式化
				type: Boolean,
				default: true,
			},
			showClearBtn: {
				//清空按钮
				type: Boolean,
				default: false,
			},
			showExportBtn: {
				//导出按钮
				type: Boolean,
				default: false,
			},
		},
		watch: {
			options: {
				handler(val, _) {
					this.initOptions = val;
					if (!util.isEmptyObject(this.value)) {
						this.initData(this.value)
					}
				},
				immediate: true,
			},
			value: {
				handler(val, _) {
					if (this.options.length > 0) {
						if (!util.isEmptyObject(val)) {
							this.initData(val)
						}
					}
				},
				deep: true,
				immediate: true,
			},
			defaultValue: {
				handler(val, _) {
					if (this.options.length > 0) {
						if (!util.isEmptyObject(val)) {
							this.initData(val)
						}
					}
				},
				deep: true,
				immediate: true,
			}
		},
		methods: {

			changeDate(e, prop) {
				const item = this.initOptions.find((item) => item.prop === prop);
				if (item) {
					item.value = e.detail.value;
					this.setForm(prop, e.detail.value);
				}
			},
			handExport() {
				this.$emit('export');
			},
			clear() {
				this.initOptions.forEach(item => {
					if (item.type === "text" || item.type === "number") {
						item.value = ''
					}
					if (item.type === "select") {
						item.value = ''
						item.desc = ''
					}
					if (item.type === "checkbox") {
						item.checked = false
						item.value = item.dicData[0]
					}
					if (item.type === "switch") {
						item.checked = false
						item.value = false
					}
					if (item.type === "navigator") {
						item.value = ''
						item.desc = ''
					}
					if (item.type === "date" || item.type === "datetime") {
						item.value = ''
					}
					if (item.type === "daterange" || item.type === "datetimerange") {
						item.value = ''
					}
				})
				this.$forceUpdate()
				this.$emit('clear');
			},
			// 数据回显
			initData(val) {
				let formValue = val
				this.initOptions.forEach(item => {
					if (formValue.hasOwnProperty(item.prop)) {
						//  普通输入类型
						if (item.type === "text" || item.type === "number") {
							item.value = formValue[item.prop]
						}
						//  普通select
						if (item.type === "select" && !item.remote) {
							let index = item.dicData.findIndex(ele => ele.value === item.value)
							item.selectDefaultindex = index;
							item.value = item.dicData[index].value;
							item.desc = item.dicData[index].label;
						}
						//  远程搜索select
						if (item.type === "select" && item.remote) {
							item.value = formValue[item.prop]
						}
						//  navigator
						if (item.type === "navigator") {
							item.value = formValue[item.prop]
							formValue[item.prop] && (item.desc = formValue[item.prop + 'name'])
						}
						if (item.type === "date") {
							item.value = formValue[item.prop]
						}

					}
					this.$forceUpdate()
					// else{
					// 	if(this.showClearBtn){
					// 		setTimeout(() => {
					// 			this.value = '222222222'
					// 		}, 100);
					// 	}
					// }
				})
			},
			setForm(prop, value) {
				let form = util.deepClone(this.value);
				form[prop] = value;
				this.$emit("input", {
					prop: prop,
					value: value,
				});
			},
			onChange(e, prop) {
				const item = this.initOptions.find((item) => item.prop === prop);
				let value = e.detail.value
				if (item.value === value) return // 输入法汉字会触发两次事件
				if (item) {
					item.value = e.detail.value;
					this.setForm(prop, e.detail.value);
				}
			},
			PickerChange(e, prop) {
				const item = this.initOptions.find((item) => item.prop === prop);
				if (item) {
					item.selectDefaultindex = e.detail.value;
					item.value = item.dicData[e.detail.value].value;
					item.desc = item.dicData[e.detail.value].label;
					this.setForm(prop, item.value);
				}
			},
			PickerChangeRemote(e, prop, relationProp) {
				const item = this.initOptions.find((item) => item.prop === prop);
				if (item) {
					item.value = e.value;
					item.desc = e.label;
					if (relationProp) {
						setTimeout(() => {
							this.setForm(relationProp, e.label);
						}, 0);
					}
					this.setForm(prop, e.value);
				}
			},
			CheckboxChange(e, prop) {
				const item = this.initOptions.find((item) => item.prop === prop);
				if (item) {
					let checked = e.detail.value[0] ? true : false;
					item.value = checked ? item.dicData[1] : item.dicData[0];
					item.checked = checked;
					this.setForm(prop, item.value);
				}
			},
			switchChange(e, prop) {
				const item = this.initOptions.find((item) => item.prop === prop);
				if (item) {
					let checked = e.detail.value;
					item.value = checked
					item.checked = checked;
					this.setForm(prop, item.value);
				}
			},
			clearInput(prop) {
				const item = this.initOptions.find((item) => item.prop === prop);
				if (item) {
					item.value = "";
					this.setForm(prop, "");
				}
			},
			verification() {
				let required = this.initOptions.filter((item) => item.required);
				return new Promise((resolve, reject) => {
					let flag = required.every((item) => item.value);
					if (flag) {
						resolve();
					} else {
						let item = required.find((item) => !item.value);
						reject(item);
					}
				});
			},

			//打开picker
			openPicker(prop) {
				this.prop = prop
				this.lotusAddressData.visible = true;
				// this.lotusAddressData.provinceName = "广东省";
				// this.lotusAddressData.cityName = "广州市";
				// this.lotusAddressData.townName = "白云区";
			},
			//回传已选的省市区的值
			choseValue(res) {
				//res数据源包括已选省市区与省市区code
				this.lotusAddressData.visible = res.visible; //visible为显示与关闭组件标识true显示false隐藏
				//res.isChose = 1省市区已选 res.isChose = 0;未选
				if (res.isChose) {
					const item = this.initOptions.find((item) => item.prop === this.prop);
					this.lotusAddressData.provinceName = res.province; //省
					this.lotusAddressData.cityName = res.city; //市
					this.lotusAddressData.townName = res.town; //区
					// item.desc = `${res.province} ${res.city} ${res.town}`;
					item.value = `${res.province} ${res.city} ${res.town}`;
					this.setForm(this.prop, res);
				}
			},
			submit() {
				this.verification()
					.then(() => {
						this.$emit("confirm");
					})
					.catch((e) => {
						if (e.title) {
							uni.showToast({
								title: "请填写" + e.title,
								icon: "none",
							});
						}
					});
			}
		}
	}

	/**
	 * [
	        {
	          title: "文本",
	          prop: "name",
	          type: "text",
	          placeholder: "请输入文本",
	        },
	        {
	          title: "数字",
	          prop: "number",
	          type: "number",
	          placeholder: "请输入数字",
	        },
	        {
	          title: "单选picker",
	          prop: "picker",
	          type: "select",
	          value:'',
	          desc:'', // 选中时label的文字
	          placeholder: "请选择",
	          selectDefaultindex:-1, //默认选中的pickerindex
	          dicData:[{
	            label:'选项1',
	            value:'88',
	          },{
	            label:'选项2',
	            value:'99',
	          }],
	        },
	        {
	          title: "多选框",
	          prop: "checkbox",
	          type: "checkbox",
	          value:'0', // 需要设置默认未选中的值
	          dicData:['0','1'],// 第一项是未选中的值，第二项是选中
	          checked: false,
	        },
	        {
	          title: "日期",
	          prop: "time",
	          type: "date", 
	          isStartTime:true, //是否是开始日期
	          isEndTime: false,//是否是结束日期
	          value:'',
	          placeholder: "请选择",
	        },
	        {
	          title: "日期时间",
	          prop: "datetime",
	          type: "datetime",
	          value:''
	        },
	        {
	          title: "制单日期范围：",
	          prop: "daterange",
	          type: "daterange",
	          value:'',
	          startTime:'',
	          endTime:''
	        },
	        {
	          title: "制单日期范围：",
	          prop: "datetimerange",
	          type: "datetimerange",
	          value:'',
	          startTime:'',
	          endTime:''
	        }
	      ]
	 */
</script>

<style lang="scss">
	/deep/ .uni-date__x-input {
		padding: 0;
	}

	.cu-modal.bottom-modal .cu-dialog {
		border-radius: 30rpx 30rpx 0 0;
	}

	button .cu-tag {
		position: absolute;
		top: 8upx;
		right: 8upx;
	}

	.scroll>view {
		position: relative;
	}

	.scroll>view>.clear-icon {
		position: absolute;
		top: 38rpx;
		right: 10rpx;
		z-index: 2;
	}

	.scroll>view::after {
		content: " ";
		width: 200%;
		height: 200%;
		position: absolute;
		top: 0;
		left: 0;
		border-radius: inherit;
		transform: scale(0.5);
		transform-origin: 0 0;
		pointer-events: none;
		box-sizing: border-box;
		border-bottom: 1upx solid rgba(0, 0, 0, 0.1);
	}

	.cu-modal {
		z-index: 888;
	}

	.cu-form-group1 {
		background-color: #ffffff;
		padding: 0.5px 15px;
		display: flex;
		align-items: center;
		min-height: 52px;
		justify-content: space-between;
		text-align: right;
	}

	.cu-form-group1 .title {
		text-align: justify;
		padding-right: 15px;
		font-size: 15px;
		position: relative;
		height: 31px;
		line-height: 31px;
	}

	.cu-form-group input {
		font-size: 28upx;
	}

	.clear {
		width: 45%;
	}

	.flex1 {
		flex: 1;
	}
</style>